<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script src="./js/bootstrap.min.js"></script>

<title></title>
<script>
			var displayableColumns = ["nroDeSerie", "sufijo", "marca", "origen", "precio"];

			function isDisplayableColumn(columnName) {
			    return displayableColumns.indexOf(columnName) > -1;
			}

            $(document).ready(function() {                        

            	$('#submit').click(function(event) {  
                	// Obtener valores para la búsqueda
            		var numeroDeSerie = $('#nroDeSerie').val();
                	var sufijo = $('#sufijo').val();
                	var marca = $('#marca').val();
                	var origen = $('#origen').val();
                	
                	$.get("http://localhost:8080/tpads-cpr-server/ComparativaDePreciosService",
                		{nroDeSerie:numeroDeSerie,sufijo:sufijo,marca:marca,origen:origen}, 
                		function(responseText) { 

                			loadResultsTable(responseText);
                        });
                });
            });
            
            function loadResultsTable(data) {
                var tbl_body = "";
                $.each(data, function() {
                    var tbl_row = "";
                    $.each(this, function(k , v) {
                    	if (isDisplayableColumn(k)) {
                        	tbl_row += "<td>"+v+"</td>";
                    	}
                    });
                    tbl_body += "<div class='row'><tr>"+tbl_row+"</tr><div>";                 
                });
                $("#resultsTable tbody").html(tbl_body);
            }

    	</script>
</head>

<body>
	<div class="container">
		<div class="page-header">
			<h1>Comparativa de precios de rodamientos</h1>
			<h3 class="lead">Indique los criterios búsqueda a aplicar</h3>
		</div>

		<form role="search">
			<div class="input-group input-group">
				<span class="input-group-addon">Serie</span>
				<input class="form-control" id="nroDeSerie" type="text"
					style='width: 30em' />
			</div>
			<br />
			<div class="input-group input-group">
				<span class="input-group-addon">Sufijo</span> <input
					class="form-control" id="sufijo" type="text" style='width: 30em' />
			</div>
			<br />
			<div class="input-group input-group">
				<span class="input-group-addon">Marca</span> <input
					class="form-control" id="marca" type="text" style='width: 30em' />
			</div>
			<br />
			<div class="input-group input-group">
				<span class="input-group-addon">Origen</span> <input
					class="form-control" id="origen" type="text" style='width: 30em' />
			</div>
			<br /> 
			<button class="btn btn-lg" id="submit" type="button"><span class="glyphicon glyphicon-search"> Buscar</span></button>
		</form>
	</div>

	<br/>
	<ul class="nav nav-pills nav-stacked">
	  <li class="active"><a href="http://localhost:8080/tpads-odv-client/index.jsp">Back to Home</a></li>
    </ul>
	<div class="panel panel-default">
		<!-- Default panel contents -->
		<div class="panel-heading">Resultados de búsqueda</div>
		<div class="panel-body"></div>

		<table class="table" id="resultsTable">
			<thead>
				<tr>
					<th>#Serie</th>
					<th>Sufijo</th>
					<th>Marca</th>
					<th>Origen</th>
					<th>Precio</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
    
</body>
</html>